<!-- 新增分配人组件  -->
<template>
  <glsx-dialog :show="value" :title="currentId?'编辑分配人':'新增分配人'" @close="closeDialog">
    <el-form ref="addForm" :model="addForm" :rules="addFormRules" size="small" label-width="120px">
      <el-form-item label="用户名称：" prop="userId">
        <user-select v-model="addForm.userId" :multiple="false" class="a_select"></user-select>
      </el-form-item>
      <el-form-item label="分配排序：" prop="assignOrder">
        <el-input v-model.number="addForm.assignOrder" class="a_input" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="线索增减比例：" prop="indecreaseRatio">
        <el-input v-model.number="addForm.indecreaseRatio" class="a_input" placeholder="">
          <template slot="append">%</template>
        </el-input>
      </el-form-item>
      <el-form-item label="可分配城市：" prop="cities">
        <el-checkbox-group v-model="addForm.cities" class="el_checkbox_group">
          <el-checkbox v-for="(item,index) in cityList" :key="index" :label="item.code">{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" size="small" :loading="loading" @click="saveInfo">保存</el-button>
      <el-button type="default" size="small" @click="closeDialog()">取消</el-button>
    </div>
  </glsx-dialog>
</template>
<script>
import { GETCITYOPTIONS } from "@/http/system";
import { ADD_ASSIGNMENT_INFO, GET_ASSIGNMENT_INFO,EDIT_ASSIGNMENT_INFO } from "@/http/clues";
import { deepClone, showToast } from "@/common/util";
export default {
  name: "AddAssigner",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      addForm: { cities: [] },
      addFormRules: {
        userId: [
          { required: true, message: "请选择用户名称", trigger: "change" },
        ],
        assignOrder: [
          { required: true, message: "请输入分配排序", trigger: "blur" },
          { type: "integer", message: "分配排序必须为数字", trigger: "blur" },
        ],
        indecreaseRatio: [
          { required: true, message: "请输入线索增减比例", trigger: "blur" },
          { type: "number", message: "分配排序必须为数字", trigger: "blur" },
        ],
        cities: [
          { required: true, message: "请选择可分配的城市", trigger: "change" },
        ],
      },
      showDialog: false,
      currentId: "",
      cityList: this.$store.state.cityList,
      loading: false,
    };
  },
  watch: {
    id: {
      handler: function (n, o) {
        if (n) {
          this.getInfo(n);
        }
      },
      immediate: true,
    },
  },
  created() {
    this.currentId = this.id;
    let n = this.$store.state.cityList;
    console.log(n);
    if (!n || n.length <= 0) {
      this.getList();
    }
  },
  mounted() {},
  methods: {
    // 关闭弹框
    closeDialog() {
      this.$emit("input", false);
      this.currentId = "";
    },

    // 获取所有城市
    getList() {
      GETCITYOPTIONS().then((res) => {
        let list = res.data || [];
        this.cityList = list;
        this.$store.commit("SET_CITY_LIST", list);
      });
    },

    // 保存数据
    saveInfo() {
      let _this = this;
      let list = this.$store.state.userList;
      _this.$refs.addForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        let oParams = deepClone(_this.addForm);
        console.log(list);
        let o = list.find((k) => k.id == oParams.userId);
        if (o) {
          oParams.username = o.name;
        }

        _this.loading = true;

        // 编辑
        if (oParams.id) {
          EDIT_ASSIGNMENT_INFO(oParams).then((res) => {
            _this.loading = false;
            if (res.code == 200) {
              showToast({
                message: "编辑成功",
                type: "success",
              });
              _this.closeDialog();
              _this.$emit("change");
            }
          });
          return false;
        }

        // 新增
        ADD_ASSIGNMENT_INFO(oParams).then((res) => {
          _this.loading = false;
          if (res.code == 200) {
            showToast({
              message: "新增成功",
              type: "success",
            });
            _this.closeDialog();
            _this.$emit("change");
          }
        });
      });
    },

    // 获取分配人详情
    getInfo(id) {
      GET_ASSIGNMENT_INFO({ id: id }).then((res) => {
        this.addForm = res.data || {};
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.a_input {
  width: 300px;
}
.a_select {
  ::v-deep .el-select {
    width: 300px;
  }
}
.el_checkbox_group {
  display: flex;
  flex-wrap: wrap;
  .el-checkbox {
    flex: 0 0 20%;
    margin-right: 0;
  }
}
</style>